// 这是我们项目的JS入口文件

// 1.导入Jquery
// import *** from *** 是ES6中导入模块的方式
import $ from 'jquery'
// 使用 import 语法，导入css样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 注意：如果要通过路径的形式，去引入 mode_modules 中相关的文件，可以直接省略 路径前面的node_modules 这一层目录，
// 直接写包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这一层目录，默认就会去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'
// 注意：webpack,默认只能打包处理 JS 类型的文件，无法处理 其他的非 JS 类型的文件；
// 如果要处理 非JS类型的文件，我们需要手动安装一些 合适的 第三方 loader 加载器；
// 1.如果想要打包处理css文件，需要安装 cnpm i style-loader css-loader -D
// 2.打开 webpack.config.js 这个配置文件，在 里面,新增一个配置节点，叫做module,它是一个对
// 象；在这个module 对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了
// 所有第三方文件的 匹配和处理规则

// 注意：webpack 处理第三方文件类型的过程：
// 1.发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
// 2.如果能找到对应的规则，就会调用 对应的 loader 处理 这种文件类型；
// 3.在调用 loader的时候，是从后往前调用的;
// 4.当最后一个（第一个）loader 调用完毕，会把 处理的结果，直接交给 webpack 进行打包合并，最终输出到bundle.js 中去
$(function () {
    $('li:odd').css('backgroundColor', 'red')
    $('li:even').css('backgroundColor', function () {
        return '#' + 'D97634'
    })
})

// 1,webpack 能够处理 JS 文件的互相依赖关系；
// 2,webpack能够处理JS的兼容问题，把高级的浏览器不识别的语法转为 低级的，浏览器能正常识别的语法

// 命令 webpack 要打包的文件包路径 -o 打包好的输出文件的路径

// class 关键字，是ES6中提供的新语法，用来实现ES6 中面向对象编程的方式
class Person {
    static info = {name: 'zs', age: 20}
}

console.log(Person.info)
// var p1 = new Person()
// 在webpack中，默认只能处理一部分ES6的新语法，一些更高级的ES6语法或者ES7语法，webapack是处理不了的；这时候需要loader
// 通过Babel,可以帮助我们将 高级的语法转换为 低级的语法
// 1.在webpack中，可以运行如下两套命令，安装两套包，去安装Babel 相关的loader功能；
// 1.1, 第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2, 第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
// 2,打开webpack的配置文件,在module节点下的rules 数组中，添加一个新的匹配规则；
// 2.1 {test:/\.js$/,use:'babel-loader',exclude:/mode_modules/}
// 2.2 注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉，原因：
//   2.2.1:如果不排除mode_modules,则Babel会把node_modules中所有的第三方JS文件，d都打包编译，这样会非常消耗cpu
//   2.2.2:就算babel把node_modules中的JS转换完了，但是，项目也无法运行
// 3. 在项目的根目录中，新建一个叫做 .babelrc  的Babel配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc
// 配置的时候，必须符合JSON的语法规范；不能写注释，字符串必须用双引号
// 3.1 在 .babelrc 写如下的配置：
        // {
        //     "presets":["env","stage-0"],
        //     "plugins":["transform-runtime"]
        // }

